import React, { useState } from 'react'
import { Modal, Row, Col } from 'antd'
import { itemSource } from '~/constants'
import { formatTime } from '~/utils/utils'

const ItemModal = ({
  record,
  visible,
  setVisible,
  onCancel = () => {
    setVisible(false)
  },
  cancelText = '返回',
  onOk = () => {
    setVisible(false)
  },
  ...props
}: any) => {
  const {
    caseName,
    caseNo,
    serialNo,
    itemName,
    itemStock = {},
    spec,
    feature,
    remark,
    createDepartmentName,
    createTime,
    location,
    acquireWay,
    storeLocation
  } = record
  return (
    <div>
      <Modal width={800} visible={visible} cancelText={cancelText} {...props} onCancel={onCancel} onOk={onOk}>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>案件编号：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{caseNo}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>案件名称：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{caseName}</span>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>物品编号：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{serialNo}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>物品名称：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{itemName}</span>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>数量：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{itemStock.totalNumber}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>规格：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{spec}</span>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>特征：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{feature}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>备注：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{remark}</span>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>移交单位：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{createDepartmentName}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>物品来源：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{itemSource.get(acquireWay)}</span>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>移交时间：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{formatTime(createTime)}</span>
          </Col>
          <Col span={12}>
            <label style={{ fontSize: 14, color: '#8c8c8c' }}>存放地：</label>
            <span style={{ fontSize: 14, color: '#262626', marginLeft: 10 }}>{storeLocation}</span>
          </Col>
        </Row>
      </Modal>
    </div>
  )
}

export default ItemModal
